<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="#{system.name}"></title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link th:href="@{/inward/css/font.css}" rel="stylesheet"/>
    <link th:href="@{/inward/css/xadmin.css}" rel="stylesheet"/>
    <script th:src="@{/external/jquery/jquery-3.2.1.min.js}"></script>
    <script th:src="@{/external/lib/layui/layui.js}"></script>
    <script th:src="@{/external/echarts/echarts.min.js}"></script>
    <script th:src="@{/inward/js/xadmin.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        const ctxPath = [[${#servletContext.contextPath}]];
    </script>


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 98.2%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" th:src="${srcMapUrl}"></script>
    <title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    // 创建Map实例
    var map = new BMap.Map("allmap");

    // 初始化地图,设置中心点坐标和地图级别
    map.centerAndZoom("南京", 11);

    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]
    }));

    //开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);

    //添加控件和比例尺
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);

    $(document).ready(function () {
        //添加行政区划
        var bdary = new BMap.Boundary();
        bdary.get("南京市", function (rs) {       //获取行政区域
            var count = rs.boundaries.length; //行政区域的点有多少个
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return;
            }
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                map.addOverlay(ply);  //添加覆盖物
                pointArray = pointArray.concat(ply.getPath());
            }
            map.setViewport(pointArray);    //调整视野
        });

        //将数据标注添加到地图
        $.ajax({
            type: 'post',
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: ctxPath + '/externalAssembly/map/markerPoint',    //请求发送到dataActiont处
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result.code == 0) {
                    for (var i = 0; i < result.data.length; i++) {
                        var point = new BMap.Point(result.data[i].longitude, result.data[i].latitude);
                        var marker = new BMap.Marker(point);  // 创建标注

                        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                        var label = new BMap.Label(result.data[i].label, {offset: new BMap.Size(25, -5)});
                        marker.setLabel(label);

                        // 将标注添加到地图中
                        map.addOverlay(marker);

                        (function(){
                            var label = result.data[i].label;
                            marker.addEventListener("click", function(e){
                                // layer.msg(label,{icon:0,time:3000});
                                admin_medium_window(label, ctxPath + '/systemLog/list');
                            });
                        })();
                    }
                }
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("请求数据失败!");
            }
        });
    });
</script>
